<template>
  <div>
    <a-row type="flex" :gutter="16">
      <!--目录树结构-->
      <a-col :md="5" :sm="24">
        <a-card :style="{ height: '781px' }">
          <template>
            <a-directory-tree
              defaultExpandAll
              :defaultSelectedKeys="defaultSelectedKeys"
              @select="onSelect"
              @expand="onExpand"
            >
              <a-tree-node title="业务申请" key="A0">
                <a-tree-node :title="item.menuName" :key="item.id" isLeaf v-for="item in tablist" />
              </a-tree-node>
              <a-tree-node title="其他" key="B0">
                <a-tree-node :title="item.menuName" :key="item.id" isLeaf v-for="item in otherlist" />
              </a-tree-node>
            </a-directory-tree>
          </template>
        </a-card>
      </a-col>
      <!--目录内容-->
      <a-col :md="24-5" :sm="24">
        <a-card :style="{ height: '781px' }">
          <a-collapse v-model="activeKey">
            <a-collapse-panel key="1" header="行政类审批">
              <div style="display: flex">
                <div style="width: 10%; margin: 0 10px" v-for="(item, index) in data1" :key="index">
                  <a-tooltip placement="top"  :title="item.name">
                    <a-button type="primary" shape="round" ghost style="margin-top: 10px" block @click="openUrl(item.url)">
                      <div class="text-wrap">{{ item.name }}</div>
                    </a-button>
                  </a-tooltip>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="财务类审批">
              <div style="display: flex">
                <div style="width: 10%; margin: 0 10px" v-for="(item, index) in data2" :key="index">
                  <a-tooltip placement="top" :title="item.name">
                    <a-button type="primary" shape="round" ghost style="margin-top: 10px" block @click="openUrl(item.url)">
                      <div class="text-wrap">{{ item.name }}</div>
                    </a-button>
                  </a-tooltip>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel key="3" header="人事类审批">
              <div style="display: flex">
                <div style="width: 10%; margin: 0 10px" v-for="(item, index) in data3" :key="index">
                  <a-tooltip placement="top"  :title="item.name">
                    <a-button v-if="item.ref" type="primary" shape="round" ghost style="margin-top: 10px" block  @click="openBill(item.ref)">
                      <div class="text-wrap">{{ item.name }}</div>
                    </a-button>
                    <a-button v-else type="primary" shape="round" ghost style="margin-top: 10px" block @click="openUrl(item.url)">
                      <div class="text-wrap">{{ item.name }}</div>
                    </a-button>
                  </a-tooltip>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel key="4" header="项目类审批">
              <div style="display: flex">
                <div style="width: 10%; margin: 0 10px" v-for="(item, index) in data4" :key="index">
                  <a-tooltip placement="top" :title="item.name">
                    <a-button type="primary" shape="round" ghost style="margin-top: 10px" block @click="openUrl(item.url)">
                      <div class="text-wrap">{{ item.name }}</div>
                    </a-button>
                  </a-tooltip>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel key="5" header="招采类审批">
              <div style="display: flex">
                <div style="width: 10%; margin: 0 10px" v-for="(item, index) in data5" :key="index">
                  <a-tooltip placement="top" :title="item.name">
                    <a-button type="primary" shape="round" ghost style="margin-top: 10px" block @click="openUrl(item.url)">
                      <div class="text-wrap">{{ item.name }}</div>
                    </a-button>
                  </a-tooltip>
                </div>
              </div>
            </a-collapse-panel>
            <a-collapse-panel key="6" header="其他类审批">
              <div style="display: flex">
                <div style="width: 10%; margin: 0 10px" v-for="(item, index) in data6" :key="index">
                  <a-tooltip placement="top" :title="item.name">
                    <a-button type="primary" shape="round" ghost style="margin-top: 10px" block @click="openUrl(item.url)">
                      <div class="text-wrap">{{ item.name }}</div>
                    </a-button>
                  </a-tooltip>
                </div>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </a-col>
    </a-row>
    <erp-hr-induction-bill-modal ref="inductionForm" @ok="modalFormOk"></erp-hr-induction-bill-modal><!-- 入职单 -->
    <erp-hr-employee-resign-bill-modal ref="resignForm" @ok="modalFormOk"></erp-hr-employee-resign-bill-modal><!-- 离职单 -->
    <erp-hr-employee-adjust-post-bill-modal ref="adjustForm" @ok="modalFormOk"></erp-hr-employee-adjust-post-bill-modal><!-- 调整岗位单 -->
    <!-- <erp-hr-post-salary-adjustment-modal ref="adjustForm" @ok="modalFormOk"></erp-hr-post-salary-adjustment-modal> -->
    <erp-hr-employee-regular-bill-modal ref="regularForm" @ok="modalFormOk"></erp-hr-employee-regular-bill-modal><!-- 转正单 -->
    <erp-hr-post-requirement-bill-modal ref="postForm" @ok="modalFormOk"></erp-hr-post-requirement-bill-modal><!-- 岗位需求单 -->
  </div>
</template>
<script>
import ACol from 'ant-design-vue/es/grid/Col'
import { getAction } from '@/api/manage'
import ErpHrEmployeeRegularBillModal from '@/views/erp/hr/regular/modules/ErpHrEmployeeRegularBillModal'
import ErpHrPostSalaryAdjustmentModal from '@/views/erp/hr/adjust/modules/ErpHrPostSalaryAdjustmentModal'
import ErpHrEmployeeResignBillModal from '@/views/erp/hr/resign/modules/ErpHrEmployeeResignBillModal'
import ErpHrPostRequirementBillModal from '@/views/erp/hr/post/modules/ErpHrPostRequirementBillModal'
import ErpHrInductionBillModal from '@/views/erp/hr/induction/modules/ErpHrInductionBillModal'
import ErpHrEmployeeAdjustPostBillModal from '@/views/erp/hr/adjust/modules/ErpHrEmployeeAdjustPostBillModal'


export default {
  name: 'EoaCmsArticlePortal',
  components: {
    ACol,
    ErpHrEmployeeRegularBillModal,
    ErpHrPostSalaryAdjustmentModal,
    ErpHrEmployeeResignBillModal,
    ErpHrPostRequirementBillModal,
    ErpHrInductionBillModal,
    ErpHrEmployeeAdjustPostBillModal
  },
  data() {
    return {
      defaultSelectedKeys: [],
      activeKey: ['1', '2', '3', '4', '5','6'],
      url: {

      },
      tablist: [
        { id: '1', menuName: '行政类审批' },
        { id: '2', menuName: '财务类审批' },
        { id: '3', menuName: '人事类审批' },
        { id: '4', menuName: '项目类审批' },
        { id: '5', menuName: '招采类审批' },
      ],
      otherlist: [{ id: '6', menuName: '其他类审批' }],
      data1: [
        { url: '/oa/car/CarUserInfoList', id: 1, name: '车辆使用申请' },
        { url: '/oa/carmaintenance/ErpCarMaintenanceList', id: 2, name: '车辆维修保养申请' },
        { url: '/oa/meeting/erpMeetingReservation', id: 3, name: '会议室使用申请' },
        { url: '/erp/administration/seal/ErpSealCertificationUseRecordList', id: 4, name: '印章资质使用申请' },
        { url: '/erp/workbench/computerPurchase/ErpComputerPurchaseList', id: 5, name: '笔记本采购申请' },
        { url: '/erp/workbench/carSubsidy/ErpCarSubsidyList', id: 6, name: '车辆补贴申请' },
        { url: '/erp/workbench/goodsmaintenance/ErpGoodsMaintenanceList', id: 7, name: '物品维修申请' },
        { url: '/erp/purchase/recipients/ErpPurchaseRecipientsList', id: 8, name: '物品领用申请' },
      ],
      data2: [
        { url: '/erp/finance/borrow/ErpFinanceLoanBillList', id: 1, name: '借款申请' },
        { url: '/erp/finance/travel/ErpFinanceTravelReimbursementBillList', id: 2, name: '差旅报销' },
        { url: '/erp/finance/reimbursement/ErpFinanceReimbursementBillList', id: 3, name: '费用报销' },
        { url: '/erp/finance/repayment/ErpFinanceRepaymentSlipList', id: 4, name: '还款申请' },
        { url: '/erp/finance/invoice/ErpFinanceInvoiceApplicationBillList', id: 5, name: '开票申请' },
        { url: '/erp/finance/deposit/ErpFinanceProjectDepositBillList', id: 6, name: '保证金申请' },
        { url: '/erp/finance/collectMoney/ErpFinanceCollectMoneyApplicationBillList', id: 7, name: '收款申请' },
        { url: '/erp/finance/payment/ErpFinancePaymentSlipList', id: 8, name: '付款申请' },
        { url: '/erp/finance/projectProgress/ErpFinanceProjectProgressPaymentApplicationBillList', id: 9, name: '工程进度款支付申请' },
        { url: '/erp/finance/withdrawMoney/ErpWithdrawMoneyList', id: 10, name: '提现申请' },
      ],
      data3: [
        { url: '',ref:'postForm', id: 1, name: '岗位需求申请' },
        { url: '',ref:'regularForm', id: 2, name: '转正申请' },
        //{ url: '',ref:'adjustForm', id: 3, name: '调岗调薪申请' },
        { url: '',ref:'adjustForm', id: 3, name: '人员调岗申请' },
        { url: '',ref:'resignForm', id:4, name: '离职申请' },
        { url: '/erp/hr/training/ErpHrTrainingApplyList', id: 5, name: '培训申请' }
      ],
      data4: [
        { url: '/erp/omc/prepareproject/ErpOmcPrepareProjectList', id: 1, name: '预立项申请' },
        { url: '/erp/omc/project/ErpOmcProjectApplyList', id: 2, name: '立项申请' },
        { url: '/erp/omc/tender/ErpOmcTenderList', id: 3, name: '投标申请' },
        { url: '/erp/omc/tenderfile/ErpOmcTenderFileList', id: 4, name: '投标文件申请' },
        { url: '/erp/omc/tenderresult/ErpOmcTenderResultList', id: 5, name: '投标结果申请' },
        { url: '/erp/omc/contractmanager/ErpOmcCollectContractManagerList', id: 6, name: '项目收款合同申请' },
        { url: '/contractmanager/ErpOmcPayContractManagerList', id: 6.1, name: '项目付款合同申请' },
        { url: '/erp/omc/contractmanager/ErpOmcContractBorrowManagerList', id: 7, name: '项目合同借阅申请' },
        { url: '/erp/omc/platformaccount/ErpOmcPlatformAccountList', id: 8, name: '平台账号申请' },
      ],
      data5: [
        { url: '/erp/purchase/procurement/ErpPurchaseApplyFormList', id: 1, name: '采购申请' },
        { url: '/erp/purchase/procurement/ErpPurchaseApplyInvitationList', id: 2, name: '招标采购申请' },
        // { url: '/erp/purchase/recipients/ErpPurchaseCannibalizeList', id: 3, name: '物资调拨申请' },
      ],
      data6: [
        // { url: '', id: 1, name: '其他申请单' },
        { url: '/erp/purchase/contract/ErpPurchaseContractList', id: 1, name: '非项目付款合同' },
      ],
    }
  },
  created() {},
  methods: {
    onSelect(keys) {
      this.activeKey = keys
    },
    onExpand() {
      console.log('Trigger Expand')
    },
    openBill(ref){
      this.$refs[`${ref}`].add();
    },
    openUrl(url){
      this.$router.push({
        path: url,
      })
    },
    modalFormOk() {

    },
  },
}
</script>

<style lang="less" scoped>
.ant-list-item-meta-title {
  font-weight: 600;
}
.demo-infinite-container {
  border: 1px solid #e8e8e8;
  overflow: auto;
  padding: 8px 24px;
  overflow: auto;
  height: 100px;
}
.demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
.text-wrap {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>